<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      Axios Examples
      <router-link to="/axiosHttpClient">AxiosExamples</router-link>.
    </p>
    <h3>Vue-Composable Examples</h3>
    <ul>
      <li>
          <router-link to="/vue-composable">VueComposable Examples</router-link>
      </li>
      <li>
          <router-link to="/customSlider">CustomRangeSlider</router-link>
      </li>
      <li>
          <router-link to="/vfor-example">vforExample</router-link>
      </li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
    </ul>
    <h3>VUE官网教程</h3>
    <ul>
      <li>
          <router-link to="/introduce">介绍</router-link>
      </li>
      <li>
          <router-link to="/computed">计算属性</router-link>
      </li>
      <li>
          <router-link to="/classAndStyle">Class与Style绑定</router-link>
      </li>
      <li>
          <router-link to="/conditionalRendering">条件渲染</router-link>
      </li>
      <li>
          <router-link to="/listRendering">列表渲染</router-link>
      </li>
    </ul>
    <h3>事件，表单输入，组件基础</h3>
    <ul>
      <li>
          <router-link to="/eventHandling">事件处理</router-link>
      </li>
      <li>
          <router-link to="formInputBinding">表单输入绑定</router-link>
      </li>
      <li>
          <router-link to="/componentBasics">组件基础</router-link>
      </li>
      <li>
          <router-link to="/props">Props组件属性</router-link>
      </li>
      <li>
          <router-link to="/home/home">Vue+TypeScript构造器使用</router-link>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
